<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @font-face {
            font-family: 'Circular';
            src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1137/Circular-Book.woff') format('woff');
            font-weight: normal;
        }

        @font-face {
            font-family: 'Circular';
            src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1137/Circular-Bold.woff') format('woff');
            font-weight: bold;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            background: #18212D;
        }

        body {
            position: absolute;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            padding: 1rem;
            color: white;
            font-family: 'Circular', 'sans-serif';
            -webkit-font-smoothing: antialiased;
        }

        section {
            display: flex;
            flex-direction: column;
            position: relative;
            width: 100%;
            max-width: 18rem;
            margin: auto;
            text-align: center;
        }

        h1 {
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        a {
            color: #206EFF;
            font-weight: bold;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        footer {
            margin-bottom: 1rem;
        }

        footer span {
            opacity: .5;
        }

        .logo img {
            width: 75px;
            height: 16px;
        }

        article {
            display: flex;
            flex-direction: column;
            position: relative;
            width: 100%;
            min-height: 8rem;
            margin-bottom: 1rem;
            padding: 1rem;
        }

        .red {
            background-color: #FF324A;
        }

        .green {
            background-color: #31FFA6;
        }

        .blue {
            background-color: #206EFF;
        }

        .yellow {
            background-color: #FFFF99;
        }
        div {
            position: absolute;
            top: .5rem;
            left: .5rem;
            width: 1rem;
            height: 1rem;
        }

    </style>
    <script type="text/javascript" src="./js/anime/anime.min.js"></script>
</head>
<body>
<section>
    <article>
        <svg width="800" height="600" viewBox="0 0 800 600">
<!--            <path fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>-->
            <path fill="none" stroke="#FFF"
                  d="M 0 450 L 350 450 C 150 350 200 50 400 250 C 600 50 650 350 450 450 L 800 450  "
            />
        </svg>
        <div class="green"></div>
    </article>
    <footer>
        <span>Made with</span> <a href="http://anime-js.com">anime.js</a>
    </footer>
    <a class="logo" href="http://anime-js.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1137/anime-logo.png"></img></a>
</section>
</body>
<script>
    var path = anime.path('path');

    anime({
        targets: 'div',
        translateX: path('x'),
        translateY: path('y'),
        rotate: path('angle'),
        duration: 3000,
        loop: true,
        easing: 'linear'
    });

    anime({
        targets: 'path',
        opacity: 0,
        duration: 6000,
        loop: true,
        direction: 'alternate',
        easing: 'easeInOutExpo'
    });
</script>

</html>